<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="6">
                    <h1 style="font-family: 新宋体;font-size: larger">系统课程管理中心</h1>
                </el-col>
                <el-col :span="6">
                </el-col>
                <el-col :span="6">
                </el-col>
                <el-col :span="6">
                </el-col>
            </el-row>
        </el-header>
        <el-row :gutter="0">
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"/>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"/>
                <el-input v-model="pageInfo.search" size="default" placeholder="Type to search"/>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"/>
                <el-button type="primary" @click="myPage" size="large">搜索</el-button>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"/>
                <el-button type="warning" @click="reset" size="large">重置</el-button>
            </el-col>

        </el-row>
        <el-main>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column fixed prop="username" label="用户名" width="150"/>
                <el-table-column prop="certificate" label="教师资格证资料" width="150">
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.certificate" :fit="contain"/>
                    </template>
                </el-table-column>
                <el-table-column prop="trueName" label="真实姓名" width="150"/>
                <el-table-column prop="idCode" label="身份证号" width="180"/>
                <el-table-column prop="password" label="密码" width="150"/>
                <el-table-column prop="age" label="年龄" width="150"/>
                <el-table-column prop="sex" label="性别" width="150"/>
                <el-table-column prop="vip" label="会员" width="150"/>
                <el-table-column prop="nickname" label="昵称" width="150"/>
                <el-table-column prop="avatarUrl" label="头像" width="150">
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.avatarUrl" :fit="contain"/>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="150"/>
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button
                                type="success"
                                size="small"
                                @click.prevent="enableRow(scope.row)"
                                id="enableButton"
                        >
                            通过
                        </el-button>
                        <el-button
                                type="danger"
                                size="small"
                                @click.prevent="bannedRow(scope.row)"
                        >
                            拒绝
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next"
                           :page-size="pageInfo.pageSize"
                           :total="totalCount"
                           @current-change="changePageNum"/>
        </el-main>
    </el-container>
</template>

<script setup>
    import {ref, reactive, onMounted} from 'vue'
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
     import dayjs from 'dayjs'
    import {ElMessage} from "element-plus";
    import {acceptToTeacher, launchingTeacher, refuseToTeacher,teacherOrdinaryCount,teacherVipCount} from "@/api/user";
    import {socket} from "@/utils/webSocket";

    //整体表格函数
    //表格的参数
    const tableData = ref([])
    const store = useStore();
    const router = useRouter();


    const pageInfo = reactive({pageNum: 1, pageSize: 5, search: ''});
    const totalCount = ref(10);
    const totalOrdinary = ref();
    const totalVip = ref();
    const queryCondition = ref({state:1, type: 'message',content:'' });

    onMounted(() => {
        myPage();
    });
    const init = () => {
        queryCondition.value.type = 'message';
        // console.log('message....')
        socket.sendMsg(JSON.stringify(queryCondition.value));
    };
    //分页函数
    const myPage = () => {
        launchingTeacher(pageInfo).then((res) => {
             console.log(res.data)
            if (res.data.total > 0) {
                tableData.value = res.data.list;
            }
            totalCount.value = res.data.total;
        });
        teacherOrdinaryCount().then((res) => {
            totalOrdinary.value = res.data;
        })
        teacherVipCount().then((res) => {
            totalVip.value = res.data;
        })

    };
    //改变页数函数
    const changePageNum = (pageNum) => {
        pageInfo.pageNum = pageNum
        myPage()
    }
    //搜索重置函数
    const reset = () => {
        pageInfo.search = '';
        myPage();
    }
    const enableRow = (row) => {
        console.log(row)
        acceptToTeacher(row.id).then((res)=>{
            ElMessage.success("认证通过");
            // socket.initWebSocket(`ws://localhost:8081/notice/` + row.id);
            // queryCondition.value.content = `恭喜你已认证为学园用户`;
            // init();
            setTimeout(() => {
                // init();
                location.reload();
            }, 1000); // 两秒后刷新页面
        })

    }
    const bannedRow = (row) => {
        refuseToTeacher(row.id).then((res)=>{
            ElMessage.info("拒绝认证");
            // socket.initWebSocket(`ws://localhost:8081/notice/` + row.id);
            // queryCondition.value.state = 0;
            // queryCondition.value.content = `未通过审核，请您重新修改信息申请`;
            // init();
            setTimeout(() => {
                // init();
                location.reload();
            }, 1000); // 两秒后刷新页面
        })
    }
</script>

<style scoped>

</style>